<template>
  <div class="rules">
    <div>
      <div>
        <div class="ColClass ColTab">
          <div class="col_title">
            分类列表<Button type="primary" @click="handleToAddCustom"
              >新建分类</Button
            >
          </div>
          <Input
            enter-button
            placeholder="请输入关键词"
            style="width: auto;padding-left:10px"
          >
            <span slot="append">
              <Button type="primary">
                <Icon type="ios-search" @click.prevent="handleToSearchCustom" />
              </Button>
            </span>
          </Input>
          <!-- <div><Icon type="md-folder" style="margin:0 10px " />分类列表</div> -->
          <Page
            :total="customListdataCount"
            :current="customListpageCurrent || 1"
            :page-size="customListpageSize"
            :page-size-opts="customListpageSizeOpts"
            @on-change="customListchangePageCurrent"
            @on-page-size-change="customListchangePageSize"
            style="padding: 10px 0; display: flex; justify-content: center"
          ></Page>
          <!-- <div
            v-for="(item, index) in ListData"
            :key="index"
            style="margin:10px 30px;display:flex"
          >
            <Icon type="ios-albums" style="line-height:22px;padding-right:5px"/>
            <div style="width:100px">{{ item.Name }}</div>
            <Icon type="ios-more" :size="16" style="padding-left:40px" />
          </div> -->
          <Tree
            :data="customListListData"
            @on-contextmenu="handleConstomMenu"
            @on-select-change="handleConstomTree"
            :render="renderContent"
          >
          </Tree>
        </div>
        <div class="ColClass">
          <Tabs value="name1">
            <TabPane label="数据预览" name="name1">
              <Button
                type="primary"
                style="margin-bottom: 10px"
                @click="handleNewUser"
                >新增</Button
              >&nbsp;&nbsp; &nbsp;&nbsp;
              <Button
                type="primary"
                style="margin-bottom: 10px"
                @click="chilckSearchFileManagement"
                >刷新</Button
              >
              <div>
                <Table border :columns="columns" :data="ListData"></Table>
              </div>
              <Page
                :total="dataCount"
                :current="pageCurrent || 1"
                :page-size="pageSize"
                :page-size-opts="pageSizeOpts"
                show-total
                show-elevator
                show-sizer
                @on-change="changePageCurrent"
                @on-page-size-change="changePageSize"
                style="padding: 10px 0; display: flex; justify-content: center"
              ></Page>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>

    <Modal
      v-model="showCustomListModel"
      :title="isaddCustomList ? '新增' : '编辑'"
      @on-ok="CustomListModelOk"
      @on-cancel="CustomListModelCancel"
    >
      自定义类型：<Input
        v-model="customFormItem.title"
        placeholder="Enter something..."
        style="width: 200px"
      />
      <br/>
     排序：<InputNumber :max="9999" :min="0" v-model="customFormItem.Count" />
    </Modal>
    <!-- 编辑弹框 -->
    <Modal
      v-model="submintModa"
      :title="'新增'"
      @on-ok="handleSave"
      @on-cancel="handleCancel"
    >
      <Row class="RowStyle">
        <i-col span="8" style="line-height: 25px">类型</i-col>
        <i-col span="14">
          <Select v-model="formItem.Type">
            <Option
              v-for="item in kindList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </i-col>
      </Row>
      <Row>
        <i-col span="8" style="line-height: 25px">自定义类型</i-col>
        <i-col span="14">
          <Input
            v-model="formItem.CustomType"
            placeholder="Enter something..."
          />
        </i-col>
      </Row>
      <Row class="RowStyle">
        <i-col span="8" style="line-height: 25px">文件上传</i-col>
        <i-col span="14">
          <Upload
            :action="$httpUrl + '/put-file'"
            :on-success="getUploadURL"
            :headers="getAuthHeaders()"
            type="drag"
            :show-upload-list="false"
          >
            <div style="padding: 20px 0">
              <Icon
                type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"
              ></Icon>
              <p>上传文件</p>
            </div>
          </Upload>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { resolveComponent } from "vue";
import { dateForma } from "@/common/until.js";

export default {
  data() {
    return {
      modelKind: 1,
      kindList: [
        {
          value: 0,
          label: "图片",
        },
        {
          value: 1,
          label: "文件",
        },
        {
          value: 2,
          label: "mp3",
        },
        {
          value: 3,
          label: "mp4",
        },
        {
          value: 4,
          label: "压缩包",
        },
        {
          value: 5,
          label: "安装包",
        },
      ],
      submintModa: false, //编辑弹框显示
      delModel: false,
      delName: "",
      showCustomListModel: false,
      isaddCustomList: true,
      customFormItem: {
        Id: 0,
        PartnerId: 0,
        title: "",
        Count:0,
        Type: 0,
        Visits: 0,
        Ctime: 0,
        Cuser: "",
        Mtime: 0,
        Muser: "",
      },
      formItem: {
        Id: 0,
        Name: "",
        Type: 0,
        CustomType: "",
        Path: "",
        Url: "",
        Visits: 0,
        Ctime: 0,
        Cuser: "",
        Mtime: 0,
        Muser: "",
      },
    };
  },
  computed: {
    ruledataCount() {
      return this.$store.state.rule.dataCount;
    },
    customListListData() {
      return this.$store.state.customList.ListData;
    },
    customListpageCurrent() {
      return this.$store.state.customList.pageCurrent;
    },
    customListpageSize() {
      return this.$store.state.customList.pageSize;
    },
    customListpageSizeOpts() {
      return this.$store.state.customList.pageSizeOpts;
    },
    customListdataCount() {
      return this.$store.state.customList.dataCount;
    },
    ListData() {
      return this.$store.state.fileManagement.ListData;
    },
    pageCurrent() {
      return this.$store.state.fileManagement.pageCurrent;
    },
    pageSize() {
      return this.$store.state.fileManagement.pageSize;
    },
    pageSizeOpts() {
      return this.$store.state.fileManagement.pageSizeOpts;
    },
    dataCount() {
      return this.$store.state.fileManagement.dataCount;
    },
    fileManagementSearchValue() {
      return this.$store.state.fileManagement.searchValue;
    },
    columns() {
      return [
        {
          title: "Id",
          key: "Id",
          align: "center",
          width: 160,
        },
        {
          title: "类型",
          key: "Type",
          align: "center",
          width: 160,
          render: (h, params) => {
            let showView = "";
            if (params.row.Type === 0) {
              showView = "图片";
            } else if (params.row.Type === 1) {
              showView = "文件";
            } else if (params.row.Type === 2) {
              showView = "mp3";
            } else if (params.row.Type === 3) {
              showView = "mp4";
            } else if (params.row.Type === 4) {
              showView = "zip";
            } else {
              showView = "其他";
            }
            return h("div", showView);
          },
        },
        {
          title: "自定义类型",
          key: "CustomType",
          align: "center",
          width: 160,
        },
        {
          title: "文件名",
          key: "Name",
          align: "center",
          width: 160,
        },
        {
          title: "下载路径",
          key: "Url",
          align: "center",
          width: 260,
        },
        {
          title: "绝对路径",
          key: "Path",
          align: "center",
          width: 260,
        },
        {
          title: "下载量",
          key: "Visits",
          align: "center",
          width: 100,
        },
        {
          title: "修改时间",
          key: "Mtime",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h(
              "div",
              dateForma(new Date(params.row.Mtime), "yyyy-MM-dd hh:mm:ss")
            );
          },
        },
        {
          title: "修改者",
          key: "Muser",
          align: "center",
          width: 160,
        },

        {
          title: "创建时间",
          key: "Ctime",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h(
              "div",
              dateForma(new Date(params.row.Ctime), "yyyy-MM-dd hh:mm:ss")
            );
          },
        },
        {
          title: "创建者",
          key: "Cuser",
          align: "center",
          width: 160,
        },
        {
          title: "编辑",
          key: "edit",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.Id);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ];
    },
  },
  methods: {
    ...mapMutations(["setCustomList", "setFileManagement"]),
    ...mapActions([
      "searchCustomList",
      "addCustomList",
      "editCustomList",
      "deleteCustomList",
      "searchFileManagement",
      "addFileManagement",
      "deleteFileManagement",
      "editFileManagement",
    ]),
    //取消
    handleCancel() {
      this.$Message.info("cancel");
    },
    //弹框保存按钮
    handleSave() {
      //通过接口保存数据 ----> name
      if (this.isEdit) {
        // 编辑
        this.editFileManagement({
          Id: this.formItem.Id,
          Name: this.formItem.Name,
          Type: this.formItem.Type,
          CustomType: this.formItem.CustomType,
        }).then((res) => {
          console.log("__res__", res);
          if (res.data.code === 2000) {
            this.$Message.success("编辑成功");
            this.searchFileManagement();
          } else {
            this.$Message.error("编辑失败！");
          }
        });
      } else {
        // 新增
        this.addFileManagement(this.formItem).then((res) => {
          if (res.data.code === 2000) {
            this.$Message.success("添加成功");
            this.searchFileManagement();
          } else {
            this.$Message.error("保存失败！");
          }
        });
      }
    },
    //图片上传
    getUploadURL(res) {
      console.log("____res__", res);
      if (res.code === 2000 && res != undefined) {
        this.$Message.success("上传成功");
        this.formItem.Path = res.data.url;
        this.formItem.Url = this.$httpUrl + res.data.url;
        this.formItem.Name = res.data.originalname;
      } else {
        this.$Message.error("失败！");
      }
    },
    getAuthHeaders() {},

    //显示编辑
    edit(row) {
      //通过id查找 ---> 获取相关数据  ----> 编辑弹框 ---> 将数据渲染到编辑弹框
      this.isEdit = true;
      this.submintModa = true;
      // this.formItem = row;
      this.formItem.Id = row.Id;
      this.formItem.Name = row.Name;
      this.formItem.Type = row.Type;
      this.formItem.CustomType = row.CustomType;
      this.formItem.Path = row.Path;
      this.formItem.Url = row.Url;
      this.formItem.Visits = row.Visits;
      this.formItem.Ctime = row.Ctime;
      this.formItem.Cuser = row.Cuser;
      this.formItem.Mtime = row.Mtime;
      this.formItem.Muser = row.Muser;
    },
    //删除
    remove(index) {
      //获取Id --->  删除接口 --> Id 查找
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {
          this.deleteFileManagement(index).then(() => {
            //刷新列表
            this.$Message.success("删除成功！");
            this.searchFileManagement();
          });
        },
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },
    changePageCurrent(current) {
      this.setFileManagement({
        pageCurrent: current,
      });
      this.Init();
    },
    changePageSize(pageSize) {
      this.setFileManagement({
        pageSize: pageSize,
      });
      this.Init();
    },
    //新建
    handleNewUser() {
      //开弹框
      this.submintModa = true;
      this.formItem.Id = 0;
      this.isEdit = false;
      this.adminUserObject = {};
      this.adminicon = "";
    },
    handleConstomMenu(data) {
      this.contextData = data;
    },
    handleConstomTree(data) {
      if (data.length > 0) {
        this.formItem.CustomType = data[0].title;
        this.setFileManagement({
          searchValue: data[0].title,
        });
        this.searchFileManagement({ offset: 0 });
      }
    },
    handleConstomEdit() {},
    handleConstomDelete() {},
    handleToAddCustom() {
      this.isaddCustomList = true;
      this.showCustomListModel = true;
      this.customFormItem.title = "";
      this.customFormItem.Count = 0;
      this.customFormItem.Id = 0;
    },
    CustomListModelOk() {
      //通过接口保存数据 ----> name
      if (!this.isaddCustomList) {
        // 编辑
        this.editCustomList({
          Id: this.customFormItem.Id,
          title: this.customFormItem.title,
          Count:this.customFormItem.Count,
        }).then((res) => {
          console.log("__res__", res);
          if (res.data.code === 2000) {
            this.$Message.success("编辑成功");
            this.searchCustomList();
          } else {
            this.$Message.error("编辑失败！");
          }
        });
      } else {
        // 新增
        this.addCustomList(this.customFormItem).then((res) => {
          if (res.data.code === 2000) {
            this.$Message.success("添加成功");
            this.searchCustomList();
          } else {
            this.$Message.error("保存失败！");
          }
        });
      }
    },
    renderContent(h, { root, node, data }) {
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            width: `200px`,
          },
        },
        [
          h("span", [h("span", data.title)]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "2px",
              },
            },
            [
              h(
                "Button",
                {
                  props: { type: "error", size: "small" },
                  icon: "ios-add",
                  style: {
                    marginRight: "8px",
                  },

                  on: {
                    click: () => {
                      //事件
                      this.removeCustom(data);
                    },
                  },
                },
                "删除"
              ),
            ]
          ),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "2px",
              },
            },
            [
              h(
                "Button",
                {
                  props: { type: "primary", size: "small" },
                  icon: "ios-add",
                  style: {
                    marginRight: "8px",
                  },
                  on: {
                    click: () => {
                      //事件
                      this.editCustom(data);
                    },
                  },
                },
                "编辑"
              ),
            ]
          ),
        ]
      );
    },

    removeCustom(row) {
      // this.delModel = true;
      // this.customFormItem.Id = row.Id;
      // this.delName = row.title;
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {
          this.deleteCustomList(row.Id).then(() => {
            //刷新列表
            this.$Message.success("删除成功！");
            this.searchCustomList();
          });
        },
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },
    editCustom(row) {
      console.log("rpw", row);
      this.isaddCustomList = false;
      this.showCustomListModel = true;
      this.customFormItem.Id = row.Id;
      this.customFormItem.title = row.title;
      this.customFormItem.Count = row.Count;
    },

    CustomListModelCancel() {},
    customListchangePageCurrent(current) {
      console.log("___触发_")
      this.setCustomList({
        pageCurrent: current,
      });
      this.searchCustomList({ offset: 0 });
    },
    customListchangePageSize(pageSize) {
      
      this.setCustomList({
        pageSize: pageSize,
      });
      this.Init();
    },
    handleToSearchCustom() {
      this.setCustomList({
        pageCurrent: 1,
      });
      this.searchCustomList({ offset: 0 });
    },

    Init() {
      this.searchCustomList({ offset: 0 }).then((res) => {
        if (res.code === 2000 && res.data.length > 0) {
          this.formItem.CustomType = res.data[0].title;
          this.setFileManagement({
            searchValue: res.data[0].title,
          });
        }
        this.searchFileManagement({ offset: 0 });
      });
    },
    chilckSearchFileManagement() {
      this.searchFileManagement({ offset: 0 });
    },
  },
  created() {},
  mounted() {
    this.Init();
  },
};
</script>
<style scoped lang="less">
.rules {
  margin: 20px 0 0 30px;
  .titles {
    font-size: 28px;
    font-weight: 800;

    display: flex;
    justify-content: space-between;
  }
  .ColTab {
    width: 240px;
    float: left;
  }
  .ColClass {
    border: 1px solid #eee;
    height: 68vh;

    .col_title {
      line-height: 30px;
      margin: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
    }
    .col_Years {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      padding-left: 18px;
      margin-top: 5px;
    }
    .col_Years:active {
      background: #f0faff;
    }
    .col_Years:focus {
      background: #f0faff;
    }

    .add_NewRule {
      height: 40px;
      line-height: 40px;
      margin: 10px;
      widows: 100%;
      text-align: center;
      font-size: 14px;
      display: flex;
      div {
        margin: 0 5px;
      }
    }
    .add_NewRulediv:hover {
      color: #2d8cf0;
    }
    .allSetting {
      margin: 5px 10px;
    }
  }
}
</style>
<style>
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.ivu-tree-title {
  width: 90%;
}
</style>
<style scoped lang="less">
.create {
  margin: 50px 30px 0 30px;
}
.RowStyle {
  margin: 20px;
}
</style>
